<?php
	include_once 'news.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
<title>Microbrasserie Le Bilboquet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.cookies.2.2.0.min.js"></script>
<script src="news.js"></script>
<script src="redirect.js"></script> </script>
<script>
var oldobject;
	$(function()
		{
				
				
			var window_w=$("#principal").width();
			var fontsize=fontpourcentage(window_w);
			var margintop_menu=margintopmenu(window_w)*0.45+"px";
			$(".menulist ul li").css("font-size",fontsize);
			$(".menulist ").css("top",margintop_menu);
			$(".newcontentdiv").css("font-size",fontsize);
		//text news
			var margintop_newcontent=margintopmenuflex(window_w,20)+"px";
			$(".newcontentdiv").css("top",margintop_newcontent);
			$(".newcontentdiv").css("font-size",fontsize*0.72);
			var heightbefore=$(".bkimage").height();
			
			$(".bottomdiv").css("height",heightbefore);
			$(".botbak").css("height",heightbefore);
			$(".propo").css("height",heightbefore);
			semitop=margintopmenuflex(window_w,10)+"px"
			$(".ls").css("top",semitop);
			paramfonsize=fontsize*0.72;
			$.cookies.set('param',fontsize);
			
//######################  resize page ###################################################
		
			$(window).resize(function() {
			
				var window_w=$("#principal").width();
			
			var fontsize=fontpourcentage(window_w);
			var margintop_menu=margintopmenu(window_w)*0.45+"px";
			$(".menulist ul li").css("font-size",fontsize);
			$(".menulist ").css("top",margintop_menu);
			$(".newcontentdiv").css("font-size",fontsize);
		//text news
			var margintop_newcontent=margintopmenuflex(window_w,20)+"px";
			$(".newcontentdiv").css("top",margintop_newcontent);
			$(".newcontentdiv").css("font-size",fontsize*0.72);
			var heightbefore=$(".bkimage").height();
			$(".bottomdiv").css("height",heightbefore);
			$(".botbak").css("height",heightbefore);
			$(".propo").css("height",heightbefore);
			semitop=margintopmenuflex(window_w,10)+"px"
			$(".ls").css("top",semitop);
			});


	//click news
			$(".newstitle").click(function(){
							$(this).addClass("selected");
							var newid=$(this).attr("id");
							var id=parseInt(newid.replace("news",""));
							$(".newscontenttop").html("");
							$(".bktopimage").attr("src","images/2-2.png");
							$(".newscontenttop").html(news[id].content);
							$(".newspic").attr("src","images/product/"+news[id].pic);
							
							
							
				
				});
		
		
		})
//############################## function ################################################
		function fontpourcentage(currentpagesizel)
		{
			var currentimagesize_w=parseInt(currentpagesizel/17510*100*10);
			var pourcentage=currentimagesize_w+"%"
			return pourcentage;
			
		}
		
		function margintopmenu(currentpagesizeh)
		{
			var margintopmenu_h=parseInt(currentpagesizeh/870*30);
			return margintopmenu_h;
		}
		
		function margintopmenuflex(currentpagesizeh,top)
		{
			var margintopmenu_h=parseInt(currentpagesizeh/870*top);
			return margintopmenu_h;
		}
	
</script>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
	body{background:#000;     font-family: helvetica,arial,sans-serif;   font-size: 10pt;    line-height: 16pt;}
	#principal{width:100%;margin:0;padding:0;overflow: hidden;}
	.bkimage{width:25%;}
	.menu{	position:relative;
			background:#000;display:inline-block;
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			font-size:100%;
			
		}
		.logo{width:64%;
			  position:relative;
			  left:-14%;
			  top:-10px;
				float:left;
			 }
		.menulist{
			width:35%;
			float:right;
			font-size:100%
			color:#fff;
			position:relative;
			left:-15%;
			
			}
			
			.MainMenuList{margin-top: -25px;line-height: 230%;font-family: 'Russo One', sans-serif;}
			.menulist ul{
						list-style:none;width:100%;font-size:100%;margin:0;padding:0;
						}
		.menulist ul li{color:#fff;position:relative;width:100%;margin:0;padding:0;line-height:270%;}
		
		.menulist ul li a,.menulist ul li a:visited{color:#fff;text-decoration:none;}
		.menulist ul li a:hover{color:#b8c575;text-decoration:none;}
		.newscontent{
				display:inline-block;
				width:25%;
				position:relative;
				
			}
			.bknewscontent{
					position:relative;
					width:100%;	
			}
			.newcontentdiv{
				color:#fff;
				width:80%;
			  	position:absolute;
			 	 left:11%;
			 	 top:0;
				 display:inline-block;
				 line-height: 150%;
						}
			.botbak{position:absolute;width: 100%;}
			.ls{width:70%;}
			.bktopimage{width:100%;}
			.selected{color:#ccc;}
			.linews {line-height:150%;}
			.newlist  ul li{border-bottom:thin solid #fff;}
			h3 {font-family: 'Russo One', sans-serif ;font-size: 17px;}
			
</style>
</head>
<body>
	<div id="principal">
		<img src="images/1.jpg" id="l11" class="bkimage"/><img src="images/2.jpg" id="l12" class="bkimage" /><span class="bkimage menu"><img src="images/3.jpg" id="l13" class="bktopimage"/>
		<div class="newcontentdiv newscontenttop">
			
				
			</div>
		</span><img src="images/4.jpg" id="l14" class="bkimage"/><br/>
		<img src="images/2-1.jpg" id="l21" class="bkimage" /><div class="bkimage menu" ><img src="images/logo.png" class="logo"/>
		<span class="menulist MainMenuList">
			<ul>
				<li style="color:#b8c575">> ACCUEIL</li>
				<li><a href="microbraserie3.php">> MICROBRASSERIE</a></li>
				<li><a href="lepub.php">> LE PUB</a></li>
				<li><a href="articlespromos.php">> ARTICLES PROMOS</a></li>
				<li><a href="capsulesvideos.php">> CAPSULES VIDÉOS</a></li>
				<li><a href="galerie.php">> GALERIE PHOTOS</a></li>
				<li><a href="nousjoindre.php">> NOUS JOINDRE</a></li>
			</ul>
		</span>
		</div><img src="images/2-3.jpg" id="l23" class="bkimage newspic" /><img src="images/2-4.jpg" id="l24" class="bkimage"/><br/>
		<img src="images/3-1.jpg" id="l21" class="bkimage" /><div class="bkimage menu propo" ><img src="images/3-2.jpg" class="botbak"/>
		<div class="newcontentdiv"><a href="https://www.facebook.com/BilboquetMicrobrasserie" target="_new"><img alt="Page Facebook du Bilboquet" src="images/fb.png" style="position: absolute; width: 15%; left: -28%;"></a>
    
		<a href="http://www.youtube.com/user/microbilboquet/feed" target="_new"><img alt="Page YouTube du Bilboquet" src="images/yb.png" style="position: absolute; width: 15%; left: -28%;  top: 21%;;"></a>
    
		<p style="font-size:100%; line-height:130%" >	Fondé en 1990 et situé en plein cœur du centre-ville de Saint-Hyacinthe, ce bistro de quartier s'est rapidement démarqué par ses bières de microbrasserie et par son ambiance chaleureuse de pub irlandais.
<br><br>
Pionnier du brassage artisanal au Québec, l'établissement compte aujourd'hui 180 places intérieures et 70 places extérieures, et affiche une production annuelle de 800 hectolitres. En croissance constante, le Bilboquet se spécialise dans les produits brassicoles de dégustation. Une grande variété de bières de qualité y sont brassées, dont 8 que vous pouvez déguster sur place. Les produits de la brasserie sont présentement distribués à travers un réseau de 400 détaillants au Québec et bientôt à la S.A.Q.


</p>
 
				
			</div>
		</div><div class="bkimage menu propo" ><img src="images/3-2.jpg" class="botbak"/>
		<span class="menulist ls newlist ul li ">
			<ul>
				<li style="border:none;"><h3>NOUVELLES</h3></li>
				<?php for($i=0;$i<2;$i++){?>
				<li style="line-height:150%;padding-bottom:5px;"><a href="javascript:void(0)" id="news<?php echo $i?>" class="newstitle"><?php echo $news[$i];?></a></li><br/>
				<?php }?>
				
			</ul>
		</span>
		</div><img src="images/3-4.jpg" id="l24" class="bkimage"/><br/>
		
	</div>

</body>
</html>

<script>

window.onload = function(){
	var heightbefore=$(".bkimage").height();
	
	$(".bottomdiv").css("height",heightbefore);
	$(".botbak").css("height",heightbefore);
	$(".propo").css("height",heightbefore);
	semitop=margintopmenuflex(window_w,10)+"px"
	$(".ls").css("top",semitop);
}

</script>